<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{vertical-align: middle;}
		*{margin: 0;padding: 0;}
		.box{
			width: 343px;
			height: 480px;
			background: url(img/bg.jpg);
			margin: 0 auto;
			position: relative;
			overflow: hidden;
		}
		.bird{
			width: 40px;
			height: 480px;
			position: absolute;
			left: 50px;
		}
		.bird img{
			position: absolute;
			top: 200px;
		}
		.yidong{
			position: absolute;
			left: 0px;
			bottom: 44px;
			overflow: hidden;
		}
		.yidong img{
			width: 343px;
			float: left;

		}
	</style>
</head>
<body>
	<div class="box">
		<div class="bird">
			<img src="img/bird1.png" alt="">
		</div>
		<div class="yidong">
			<img src="img/slider.jpg">
		</div>
	</div>
</body>
<script type="text/javascript">
	var box = document.getElementsByClassName("box")[0];
	var yidong = document.getElementsByClassName("yidong")[0];
	var ydImg = yidong.getElementsByTagName("img");
	var bird = document.getElementsByClassName("bird")[0];
	var xnImg = bird.getElementsByTagName("img")[0];

	// 小鸟
	
	function xn(){
		var time = setInterval(function(){
			xnImg.style.top = xnImg.offsetTop + 10 + "px";
			xnImg.src = "img/down_bird1.png";
			if (xnImg.offsetTop>=yidong.offsetTop) {
				alert("gameover");
				clearInterval(time);
			}
			if (xnImg.offsetTop<=bird.offsetTop) {
				alert("gameover");
				clearInterval(time);
			}
		},50)
		box.onclick = function(){
			xnImg.style.top = xnImg.offsetTop - 80 + "px";
			xnImg.src = "img/up_bird1.png";
		}
	}
	xn();














	// 移动
	yidong.innerHTML+=yidong.innerHTML;
	yidong.style.width=ydImg.length*ydImg[0].offsetWidth+"px";
	function move(){
		var timer=setInterval(function(){
			// 向左移动判断
			if (-yidong.offsetLeft>=yidong.offsetWidth/2) {
				yidong.style.left=0;
			}
			yidong.style.left=yidong.offsetLeft-2+"px";
		},20)
	}
	move();
</script>
</html>